<template>
	<div class="book">
		<div class="tabs">
			<p class="p1">商品添加</p>
			<div class="box">
				<p>
					<label>商品名称：</label>
					<input type="text" v-model.lazy.trim="name"/>
				</p>
				<p>
					<label>商品序号：</label>
					<input type="text" v-model.lazy.trim="sn"/>
				</p>
				<p>
					<label>商品价格：</label>
					<input type="text" v-model.lazy.trim="price"/>
				</p>
				<p>
					<label>商品厂商：</label>
					<input type="text" v-model.lazy.trim="publisher"/>
				</p>
				<p>
					<label>商品出处：</label>
					<input type="text" v-model.lazy.trim="author"/>
				</p>
				<p>
					<label>出厂时间：</label>
					<input type="date" v-model="tpublish"/>
				</p>
				<p>
					<label>商品类型：</label>
					<select v-model="type">
						<option value="1">Java</option>
						<option value="2">SpringBoot</option>
						<option value="3">容器</option>
						<option value="4">IT技术基础</option>
						<option value="5">Vue脚手架</option>
						<option value="6">微信小程序</option>
					</select>
				</p>
				<p>
					<label>商品图片：</label>
					<input type="file" ref='pic'/>
				</p>
				<button @click="goback()">返回</button>
				<button @click="add()">提交</button>
			</div>	
		</div>
	</div>
</template>

<script>
	export default{
		name:'BookAdd',
		data(){
			return{
				name:'',
				sn:'',
				author:'',
				publisher:'',
				tpublish:'',
				pic:'',
				price:0,
				type:1
			}
		},
		methods:{
			//返回按钮
			goback(){
				this.$router.push('/adm/adm2')
			},
			// 添加按钮
			add(){
				let fs = this.$refs.pic.files	//获取的是图片完整数据
				if(fs.length >0 && fs[0] !='' && this.name!='' &&this.type!='' && this.sn!='' &&this.price!='' &&this.author!=''&&this.publisher!='' &&this.tpublish!=''){
					//创建一个空的表单对象数据
					let fd = new FormData()
					//将需要打包的数据，append方式提交给对象
					fd.append('name',this.name)			//商品名称
					fd.append('sn',this.sn)				//商品序号
					fd.append('price',this.price)		//商品价格
					fd.append('publisher',this.publisher)//商品厂商
					fd.append('author',this.author)		//商品出处
					fd.append('tpublish',this.tpublish)	//出厂时间
					fd.append('type',this.type)			//商品类型
					fd.append('pic',fs[0])				
					
				   this.axios.post('/api/adm/book/addBook',fd,{
					   header:{'Content-Type' : 'multipart/form-data'}
				   }).then((res)=>{
					   if(res.data.code === 200){
						   //请求成功后，返回 查询页
						   this.$router.push('/adm/adm2')
					   }else{
						   alert(res.data.msg)	//msg失败之后的返回信息
					   }
				   }).catch((error)=>{
					   console.log(error)
				   })
				}
			}
		}
	}
</script>

<style scoped>
.box button{
	width: 50px;
	left: 400px;
	position: relative;
	cursor: pointer;
	color: white;
	font-weight: bold;
	font-size: 15px;
	color: white;
	background: linear-gradient(to right,#00bfff,#00bfff);
	border: none;
	line-height: 25px;
	border-radius: 5px;
}
.box button:last-child{
	margin-left: 30px;
}
.tabs .p1{
	font-size: 30px;
	color:#00bfff ;
	font-weight: bold;
	padding-bottom: 20px;
	padding-right: 25px;
}
.box label{
	font-size: 20px;
	color: #00bfff;
	line-height: 40px;
}
.box input[type='text'],.box input[type="date"]{
	width: 20%;
	line-height: 25px;
	border: none;
	border: 1.5px solid #00bfff;
	border-radius: 5px;
	text-indent: 0.5em;
}
.box select{
	border: none;
	border: 1.5px solid #00bfff;
	border-radius: 5px;
	width: 5%;
	height: 25px;
}
</style>
